<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="com.kaplan.hackathon.models.GroupPhoto" %> 
<%@ page import="com.kaplan.hackathon.models.MeetupGroup"%>      
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main_careers.css">
<link rel="stylesheet" href="css/flexi.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
	<!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

	<!-- Add your site or application content here -->
	<header class="head">
		<div class="head-item">
			<a class="url home bookmark" href="dash" rel="home">
				<h1 id="site-title" class="ir logo">KAPLAN TECH CAREERS</h1> </a>
		</div>
		  <div class="navbar head-item">
            <nav>
                <a href="learn">Read</a>
                <a href="video_connect">Watch</a>
                <a href="connect">Connect</a>
                <a href="practice">Practice</a>
                <a href="perform">Become an Expert</a>
            </nav>
        </div>
	</header>
	<div id='main' class="jobs">
		<article>
			<section class="midmain">
				<table class="jobtab">
					<tbody>
						<tr class="jthead">
							<th><span class="bluetxt">MEETUP</span> <span
								class="orangetxt">Bulletin</span></th>
							<th><!-- span class="searchbox"> <input type="text"
									placeholder="zip code" id='searchQuery' />
									<button id='searchJobs' class="ir">&nbsp;</button> </span--></th>
							<th colspan="2">
								
						</tr>
						<tr class="jtsubhead">
							<td colspan="3" class="moduletitle">AVAILABLE MEETUPS</td>
							<td class="mailbar">&nbsp;</td>
						</tr>
						<tr>
							<td colspan="4">
								<table id='jobsTable' class="jtdatatable">

								</table>
								<table class="jtdetails">
									<tbody>
										<tr>

											<td colspan="2">
												
											</td>
										</tr>

									
									</tbody>
								</table></td>
						</tr>
					</tbody>
				</table>
				<table>
					
					<% int j=0, k=0, l=0;List<GroupPhoto> photos=(List<GroupPhoto>)request.getAttribute("photos");
					List<MeetupGroup> groups=(List<MeetupGroup>)request.getAttribute("groups"); for(int i=0;i<photos.size()-4 && i<groups.size();i=i+4){ %>
					<tr>
					<%j=i+1 ; k=j+1;l=k+1;%>
					   <td style="padding-bottom:45px;">
						<div style="position:relative;background-image: url(<%=photos.get(i).getPhoto_link()%>); height: 200px; width: 200px;"></div>
						 <div style="font-size:12px;"> <%=groups.get(i).getName()%></div>  
						 <div style="font-size:12px;"> Members:<%=groups.get(i).getMembers()%></div>  
						 </td>
						 <td style="padding-left:45px;padding-bottom:45px;">
						<div style="position:relative;background-image: url(<%=photos.get(j).getPhoto_link()%>); height: 200px; width: 200px;"></div>
						 <div style="font-size:12px;"> <%=groups.get(j).getName()%></div>
						 <div style="font-size:12px;"> Members:<%=groups.get(j).getMembers()%></div> 
						 </td>
						  <td style="padding-left:45px;padding-bottom:45px;">
						<div style="position:relative;background-image: url(<%=photos.get(k).getPhoto_link()%>); height: 200px; width: 200px;"></div>
						 <div style="font-size:12px;"> <%=groups.get(k).getName()%></div>
						 <div style="font-size:12px;"> Members:<%=groups.get(k).getMembers()%></div> 
						 </td>
						 <td style="padding-left:45px;padding-bottom:45px;">
						<div style="position:relative;background-image: url(<%=photos.get(l).getPhoto_link()%>); height: 200px; width: 200px;"></div>
						 <div style="font-size:12px;"> <%=groups.get(l).getName()%></div>
						 <div style="font-size:12px;"> Members:<%=groups.get(l).getMembers()%></div> 
						 </td>
					</tr>	 
					<%} %>	
					
				
				</table>
			</section>
		</article>
	</div>
	<script
		src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>
	<script src="js/jobs.js"></script>

	<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
	<script>
        var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
        (function (d, t) {
            var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
            g.src = '//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g, s)
        }(document, 'script'));
        

        $("#searchJobs" ).click(function() {
        	//var searchParam = encodeURIComponent($("#searchQuery" ).val());
        	var searchParam = ($("#searchQuery" ).val());
        	if($.trim(searchParam) == ''){
        		alert('please Enter Search Parameter');
        		return false;
        	}
        	$.get('getMeetups?searchParam=' + searchParam, function(data) {
        		alert(data);
        		alert(data.value[0]['group_photo']['photo_link']);
        		if(data != 0){
        		  	jobsJson = JSON.parse(data);
        		  	//alert(jobsJson);
        		  	alert(jobsJson[0].id);
        		  	alert(jobsJson[0].name);
        		  
        		  	alert(jobsJson[0]);
        		  //	alert(jobsJson[0].who);
        			var jobString = '<tbody><tr class="jtdatahead exp"><th colspan="4" class="jttitlecell"><span test = ""></span><a class="expbtn"><span class="bluetxt">JOBS </span> <span class="greentxt">I\'M QUALIFIED FOR</span> </a></th></tr><tr class="jtdatainfo"><th>JOB</th><th>COMPANY</th><th>LOCATION</th><th>POSTED BY</th></tr>';
        			var jobRow = '';
        			for(var t=0;t< 6;t++){
        				alert(jobsJson[t].name);
        				if(jobsJson[t].name != null){
        					if(jobsJson[t].name.length > 30)
        					{
        						headline = jobsJson[t].name;
        						headline = headline.substring(0,headline.lastIndexOf(" ")) + '...';
        					}else{
        						headline = jobsJson[t].headLine;
        					}
        					if(jobsJson[t].companyName.length > 30)
        					{
        						companyName = jobsJson[t].companyName.substring(0,30);
        						companyName = companyName.substring(0,companyName.lastIndexOf(" ")) + '...';
        					}else{
        						companyName = jobsJson[t].companyName;
        					}
	        				jobRow = '<tr><td width="35%"><span test = "'+jobsJson[t].id+'_'+t +'" >' + headline + '</span></td>' + '<td width="35%">' + companyName + '</td>' + '<td width="20%">' + jobsJson[t].locationDescription + '</td>' + '<td width="20%">'+jobsJson[t].postedByFirstName+'</td> </tr>';
	        				jobString = jobString + jobRow; 
	        				jobRow = '';
        				}
        			}
        			jobString = jobString + '</tbody><tbody><tr class="jtdatahead inactive exp"><th colspan="4" class="jttitlecell"><span test = ""></span><hr /> <a class="expbtn"> <span class="bluetxt">JOBS</span> <span class="orangetxt">REQUIRING MORE TRAINING</span></a></th></tr>';
        			for(var t=6;t< jobsJson.length;t++){
        				if(jobsJson[t].headLine != null){
        					if(jobsJson[t].headLine.length > 30)
        					{
        						headline = jobsJson[t].headLine.substring(0,30);
        						headline = headline.substring(0,headline.lastIndexOf(" ")) + '...';
        					}else{
        						headline = jobsJson[t].headLine;
        					}
        					if(jobsJson[t].companyName.length > 30)
        					{
        						companyName = jobsJson[t].companyName.substring(0,30);
        						companyName = companyName.substring(0,companyName.lastIndexOf(" ")) + '...';
        					}else{
        						companyName = jobsJson[t].companyName;
        					}
        					jobRow = '<tr><td width="35%"><span test = "" >' + headline + '</span></td>' + '<td width="35%">' + companyName + '</td>' + '<td width="20%">' + jobsJson[t].locationDescription + '</td>' + '			<td width="20%" class="sklink"><button class="bluebtn">GET THESE SKILLS</button></td></tr>';
	        				jobString = jobString + jobRow; 
	        				jobRow = '';
        				}
        			}
        			$('#jobsTable').html(jobString);
        			$(".jttitlecell .expbtn").click(function() {        
        		        $(this).toggleClass("exp").parents(".jtdatahead").siblings().toggle();
        		    });
        		    
        		          
        		    $('#jobsTable tr').click(function() {
        		        
        		    	var href = $(this).find("span").attr("test");
        		        if(href != null && href != '')
        		        var vals=href.split('_');
        		        $.get('searchJOB?jobId=' + vals[1], function(data) {
        		        	if (window.DOMParser)
        		        	  {
        		        	  parser=new DOMParser();
        		        	  xmlDoc=parser.parseFromString(data,"text/xml");
        		        	  }
        		        	else // Internet Explorer
        		        	  {
        		        	  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        		        	  xmlDoc.async=false;
        		        	  xmlDoc.loadXML(data);
        		        	  } 
        		        	 $("#overId").html('<p style="padding-left:5px;">We are looking for ' + $(xmlDoc).find("title").text().split('<p>').join('<p style="margin-left:5px">') + 'For our ' + $(xmlDoc).find("location").text() + '</p>' + "<h4>Responsibilities</h4><span id='respId'></span>");
        		        	
        		        	$("#respId").html('<p style="padding-left:5px;">' + $(xmlDoc).find("description-snippet").text().split('<p>').join('<p style="margin-left:5px">') + '</p>');
        		        	$("#beneId").html('<p style="padding-left:5px;">'+$(xmlDoc).find("description").text().split('<p>').join('<p style="margin-left:5px">')+ '</p>');
        		        	
        		        	$("#qualId").html('<p style="padding-left:5px;">'+$(xmlDoc).find("skills-and-experience").text().split('<p>').join('<p style="margin-left:5px">')+ '</p>');
        		        	$("#aboutId").html('<p style="padding-left:5px;">'+$(xmlDoc).find("company").text().split('<p>').join('<p style="margin-left:5px">')+ '</p>');
        		        	
            		        $(".jtdatatable").hide().siblings().show(); 
             		       	$(".moduletitle").text($(this).find("td").first().text());
        		        });
	       		        
        		    });
        		    
        		    $(".jtdetails .backbtn").click(function() {
        		       $(".jtdatatable").show().siblings().hide(); 
        		        $(".moduletitle").text("AVAILABLE JOBS");
        		    });
       			}else{
       				$('#jobsTable').html("<br/><br/>No Jobs found!");
       			}	
        	});
        	
        });
    </script>

</body>
</html>
